import React, { useState, memo } from 'react';
import { Table, TablePaginationConfig, } from 'antd'

interface Props {
    header: Array<Item>
    formlist: any[]
    page: any
    elected: any
}
interface Item {

}
function UserTable(props: Props) {

    // 表格头部
    var headerlist = [...props.header]
    // 表单里面的数据每一行渲染什么
    var formlist = [...props.formlist]
    // 分页器
    var [pagination, setPagination] = useState({})

    // 复选框
    var [elected, setElected] = useState([])
    // 将page传给父组件
    props.elected(elected)

    // 分页器
    var [page, setPage] = useState({})
    // 将page传给父组件
    props.page(page)

    //pagination 参数 包含有当前最新页码
    //在这里发请求, 获取最新页码对应的数据
    const handleChange = (pagination: TablePaginationConfig) => {
        // console.log(pagination);
        setPage(pagination)
    }

    // 复选框
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    // 选择发生改变的回调
    const onSelectChange = (newSelectedRowKeys: any) => {
        // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
        setElected(newSelectedRowKeys)
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    return (
        <div className='frompublic'>
            <Table
                rowSelection={rowSelection}
                columns={headerlist}
                dataSource={formlist}
                pagination={pagination}
                onChange={handleChange}
                size={'small'} />
        </div>
    );
}

export default memo(UserTable);